品牌基因+图标体系，一套完整的图标系统设计思路！

      欢迎关注「长弓小子」

    我们都是为梦想一起努力的人

图标是设计师最熟悉的设计元素，但是如何从品牌设计的角度搭建一套图标体系，并将一款产品或系列产品出现的所有图标元素进行统一，是值得思考的问题。文末有资源推荐，希望对你有所帮助。

   全文共 2135 字 22 图，阅读需要 8 分钟

如何让图标更具备品牌特性

企业或产品的品牌通常通过三个方面体现：品牌理念、视觉符号和行为系统，其中视觉符号的概括和提取就构成了品牌基因。将产品的视觉设计与品牌基因融合，才能更好的展现品牌特色。品牌基因的提取有以下几种主要方式：

  1. 形状提取   ：使用品牌 LOGO 中出现的有特点的形状，在图标设计中作为外形轮廓，或作为构成图标的基本元素：

  2. 颜色提取   ：图标配色使用品牌色，将品牌色作为图标设计的点缀色或主色调：

  3. 气质与风格提取    这种提取方法比较抽象，可以提取独特的设计风格、表现手法，比如饿了么的图标采用断开的边缘线、微软的产品图标采用同一颜色不同明度的表现手法；也可以提取品牌的气质内涵，比如北京奥运会的运动项目图标体现中国篆书之美：

上述的提取方法在应用时可同时使用，但需要注意，图标特征不要过多，否则会显得繁琐。这里给出一套图标的设计实例分解，便于大家了解品牌基因的提取方法：

案例：MOQI ID 是墨奇科技公司正在开发的子品牌，产品专注于指纹采集、分析和图像识别，具备科技属性。下图中你可以看到品牌基因提取的分析过程：

如何搭建图标系统

在设计过程中除了融入品牌基因，还需要遵循设计原则，制定完整的图标系统设计规则，图标才会具备统一的美感和韵律：

     STEP 1.   明确设计原则      

  识别性   ：图标语义传达明确，便于识别

  简洁性   ：图形尽量简洁，不做多余修饰

  一致性   ：效果、风格及表现手法保持统一

  愉悦性   ：美观耐看，细节经得起推敲

  品牌性   ：突出品牌的独有特性

      STEP 2.  建立基础体系      

一套完整的图标系统搭建的基础环节，就是制定设计所用的基础体系，包括网格系统和辅助线系统。

  网格系统   ：为了保持图标的一致性，推荐使用网格进行设计。在网格中需要预留出血位，用来防止非标准造型的图标在具体应用时边缘被切掉；同时也为设计师把握图标间平衡留下余地。网格数量可以自行选择，蚂蚁金服的 Ant Design（可阅读 Ant Design 全面解析 进行了解） 采用的是 1024px * 1024px 的网格作为标准，并预留了 64px 的出血位：

再比如刚才案例中提到的 MOQI ID 图标，是采用 1000px * 1000px 的网格进行绘制，出血位的宽度为 60px：

  辅助线系统   ：辅助线用于规定不同形状的图标的造型比例，使各种形状的图标在视觉上统一大小。如下图中 MOQI ID 图标采用正方形、圆形和长方形等标准形状，来控制图标比例：

      STEP 3.  制定设计规则      

Material Design（可阅读 Material Design 全面解析 进行了解）在图标设计标准中提到了以下几个需要注意的细节方面，这几个方面都会影响图标的形态，使图标拥有个性：

因此，想要做一套系统图标，可以从这几个方面入手制定设计规则，但这些方面并不全面，除此之外还有图标填充颜色、绘制风格、交互状态、动效变化等方面，都可以制定相应规则，来保证图标的统一性，举几个例子：

  1. 端点   ：端点就是线条的起点和结束点，不同的端点形状体现不同的图标性格，一般直角会显得硬朗，圆角则显得更友好：

  2. 角   ：角同端点一样，会传达出图标不同的性格。一套图标的角会有几组常用数值，这些数值之间最好有一定的规律，比如 Ant Design 中角采取的是 8 倍数原则，最常用圆角大小有 3 种：8px、16px、32px。下图为同一图标不同的边角效果示例：

  3. 线条   ：线条之间的关系也需要有一定的规律，比如 Ant Design 采用 8 倍数原则，常用的线条粗细有 4 种：56px、64px、72px、80px：

  4. 倾斜角度   ：线条的倾斜角度也有一定的规律可循，Ant Design 从 76 这个数值出发，根据实际情况进行灵活的应用：

除此之外，在设计的过程中也要考虑到视觉平衡感：比如弯曲的线条会比竖直的线条看起来细，所以可以将曲线适当的加粗几个 px；倾斜的线条也会比竖直的线条看起来细，也可以加粗几个 px；当图形的负空间（留白空间）不足时，则可以通过调节线条的粗细来达到视觉重量上的平衡等：

      STEP 4.  进行细节检查      

  去掉多余的节点，合并图形    为了保证图形整洁，在设计完成后对图标的多余节点进行删除，并将图形进行布尔运算合并形状，便于输出：

  线条轮廓化，缩放不变形    将线条描边转化为轮廓，并在缩放时使用 Scale 缩放功能，保证图标不产生形变：

  小数点及奇数检查    对小数点和奇数进行一轮修正，尽量保证为整数，便于输出和缩放：

  做好图层命名与编组    对于图层遵守命名规范，编组清晰。

图标设计资源推荐

推荐以下资源，便于大家提升工作效率：

  Iconfont      

https://www.iconfont.cn

Iconfont 是阿里巴巴的矢量图标库，图标种类齐全、样式繁多，设计师可以对图标进行上传、分享、编辑、下载、复制代码等。

  Kitchen Sketch 插件     

https://kitchen.alipay.com

Kitchen 是蚂蚁金服设计团队打造的一款 Sketch 工具集，可以快速搜索和调用 Iconfont 图标，并可以一键拖拽使用图标：

  Material Design 图标库    

https://material.io/resources/icons/

Material Design 图标库依照一套完整的设计标准进行绘制，严谨而优雅，支持 SVG 格式下载：

  Human Pictogram 人形 Icon     

http://pictogram2.com

Human Pictogram 提供了近四十页的人形图标，包括各类日常或脑洞大开的人物形态，提供 AI 文件、JPG、PNG 三种下载格式：

本文图片及内容参考来源：

首图来源：https://www.behance.net/gallery/69441617/COLORFUL-YEAR-LOGO-COLLECTION-2017

https://www.uisdc.com/brand-gene-icon-design-pro

https://ant.design/docs/spec/icon-cn

- END -

关注「长弓小子」公众号

欢迎「留言」共同切磋

这里有和你一样为梦想努力的小伙伴